<script setup>
import {ref, reactive, watch, computed, nextTick, getCurrentInstance} from 'vue'
import SelectPopup from "@/components/selectPopup.vue";
import SelectStore from "@/components/selectStore.vue";
import {uploadUrl, getDeptByParent, getCheckType, getStoreList, getCheckInfoList, createStoreCheckList, modifyStoreCheckList, getrecordbyid, getrecordbyidhare, updateUserSign, delphoto} from "@/api";
import Uploader from "@/components/uploader.vue";
import {host, baseUrl} from "@/utils/config";
import {onLoad} from "@dcloudio/uni-app";
import Signature from "@/components/signature.vue";

const userInfo = uni.getStorageSync('userInfo')
const dict = reactive({})
const formData = ref(null)
const pageData = reactive({
  activeCollapse: 1,
  formData: {
    parentName: '',
    parentId: null,
    csnumber: 1,
    yyzt: 1,
    recorddtls: [
    ]
  },
  checkInfoList: []
})


const remoteParams = reactive({
  xq: {
    api: getDeptByParent,
    params: {
      parentid: userInfo.dept.deptId,
      deptType: '0'
    },
    field: {
      text: 'deptName',
      value: 'deptId'
    }
  },
  checkType: {
    api: getCheckType,
    params: {
      deptId: userInfo.dept.deptId
    },
    field: {
      text: 'typename',
      value: 'id'
    }
  },
  checkInfo: {
    api: getCheckInfoList,
    params: {
      typeid: ''
    },
    field: {
      text: 'content',
      value: 'id'
    }
  },
  store: {
    api: getStoreList,
    params: {
      xqid: null,
      name: ''
    }
  }
})


const formatYyzt = (status) => {
  return dict.store_status.filter(item => item.value == status).map(item => {
    return {
      value: item.value,
      text: item.text
    }
  })
}



let getFormStatus = ref(1)

const confirmSign = (data, type) => {
  console.log('data', data)
  if (data === '') {
    return false
  }
  uni.uploadFile({
    url: uploadUrl, //上传图片的后端接口
    filePath: data,
    name: 'file',
    success: res => {
      pageData.formData[type] = JSON.parse(res.data).fileName
    }
  })
  // pageData.formData[type] = data
}

const clearSign = (type) => {
  pageData.formData[type] = ''
}
const detailId = ref('')
const isContinue = ref(false)
const loading = ref(false)
const show3 = ref(false)
const getStoreById = (id) => {
  remoteParams.store.api({id}).then(res => {
    console.log('resssssssss', res)
  })
}
onLoad(async (options) => {
  if(userInfo.permissions.includes('system:store:show3')){
    show3.value = true
  }
  if(options.id) {
    detailId.value = options.id
    const res = await getCheckType({})
    await getDetail(detailId.value, options.isShare)
    return
  }
  if(options.isContinue) {
    isContinue.value = true
    uni.getStorage({
      key: 'createStoreCatch',
      success: (res) => {
        console.log('createStoreCatch', res.data)
        pageData.formData = res.data
      }
    })
  }
  pageData.formData.parentName = userInfo.dept.deptName
  pageData.formData.parentId = userInfo.dept.deptId
  pageData.formData.creater = userInfo.userId
  pageData.formData.okSign1 = userInfo.signUrl
  pageData.formData.todoSign1 = userInfo.signUrl
  pageData.formData.nookSign1 = userInfo.signUrl
  if(options.name && options.xqid && options.xqname) {
    pageData.formData.xqid = options.xqid
    pageData.formData.xqname = options.xqname
    pageData.formData.csname = options.name
  }
})


const getDetail = async(id, isShare) => {
  loading.value = true
  const api = isShare ? getrecordbyidhare : getrecordbyid
  await api({id}).then(res => {
    if ([0, 3].includes(res.data.status)) {
      res.data.okSign2 = res.data.todoSign2
      res.data.okSign3 = res.data.todoSign3
      res.data.nookSign2 = res.data.todoSign2
      res.data.nookSign3 = res.data.todoSign3
    }
    pageData.formData = res.data
    // console.log('pageData.formData.status', pageData.formData.status)
    getFormStatus.value = pageData.formData.status
    // console.log(getFormStatus.value)
    if (!pageData.formData.okSign1) {
      pageData.formData.okSign1 = userInfo.signUrl
    }
    if (!pageData.formData.todoSign1) {
      pageData.formData.todoSign1 = userInfo.signUrl
    }
    if (!pageData.formData.nookSign1) {
      pageData.formData.nookSign1 = userInfo.signUrl
    }
    // console.log('res.data', res.data)
    // console.log('formData', pageData.formData)
    for(let i = 0; i < pageData.formData.imgList?.length; i++) {
      const imgItem = pageData.formData.imgList[i]
      if (!imgItem.imgUrl) continue
      const tmpArr = imgItem.imgUrl.split('/')
      imgItem.name = tmpArr[tmpArr.length - 1]
      const tmpArr1 = imgItem.name.split('.')
      imgItem.extname = tmpArr1[tmpArr1.length - 1]
      imgItem.url = host + imgItem.imgUrl
      if (pageData.formData.imgList[i].type === 1) {
        pageData.formData.signboard = [imgItem]
      }
      if (pageData.formData.imgList[i].type === 2) {
        pageData.formData.license = [imgItem]
      }
    }
    for (let i = 0; i < pageData.formData.recorddtls.length; i++) {
      /* if ([0, 2, 3].includes(pageData.formData.recorddtls[i].status)) {
        pageData.formData.recorddtls[i].isOk1 = 0
      } else {
        pageData.formData.recorddtls[i].isOk1 = 1
      } */
      pageData.formData.recorddtls[i].checkPhotos = []
      pageData.formData.recorddtls[i].rectifyPhotos = []
      for (let j = 0; j < pageData.formData.recorddtls[i].photoList.length; j++) {
        const photoItem = pageData.formData.recorddtls[i].photoList[j]
        if (!photoItem.imgUrl) continue
        const tmpArr = photoItem.imgUrl.split('/')
        photoItem.name = tmpArr[tmpArr.length - 1]
        const tmpArr1 = photoItem.name.split('.')
        photoItem.extname = tmpArr1[tmpArr1.length - 1]
        photoItem.url = host + photoItem.imgUrl
        if (photoItem.type === 3) {
          pageData.formData.recorddtls[i].checkPhotos.push(photoItem)
        }
        if (photoItem.type === 4) {
          pageData.formData.recorddtls[i].rectifyPhotos.push(photoItem)
        }
      }
    }
    const params = {
      typeid: pageData.formData.checktypeid
    }
    getCheckInfoList(params).then(res => {
      nextTick(() => {
        pageData.checkInfoList = res.data.map(item => {
          return {
            value: item.id,
            text: item.content
          }
        })
        loading.value = false
      })
    })
    console.log('formData1', pageData.formData)
  })
}

const isFullScreen = ref(false)
const currentSign = ref('')
const setFullScreen = (v, field) => {
  isFullScreen.value = true
  currentSign.value = field
}


Object.assign(dict, uni.getStorageSync('dict'))

const hiddenOk = ref(1)


const uploadDel = (e) => {
  console.log('eeeeee', e)
  if (!e.id) return
  const params = {
    id: e.id
  }
  delphoto(params)
}

const showEg = ref(false)
const egInfo = ref({})
const handlePopupEg = (item) => {
  console.log('item', item)
  egInfo.value = item
  showEg.value = true
}
</script>

<template>
  <nut-loading-page :loading="loading" />
  <nut-form :model-value="pageData.formData" ref="formData" :rules="formRule">
    <nut-collapse v-model="pageData.activeCollapse" :accordion="true">
      <nut-collapse-item title="基础信息" :name="1">
        <nut-form-item label="主管部门" prop="parentName" label-width="70">
          <nut-input v-model="pageData.formData.parentName" readonly />
        </nut-form-item>
        <nut-form-item label="所属管辖" prop="xqid" label-width="70">
          <select-popup v-model="pageData.formData.xqid" :echo="pageData.formData.xqname" is-remote :remote-params="remoteParams.xq"></select-popup>
        </nut-form-item>
        <nut-form-item label="场所名称" prop="csname" label-width="70">
            <nut-input v-model="pageData.formData.csname" readonly />
        </nut-form-item>
        <nut-form-item label="场所类别" prop="type" label-width="70">
            <nut-input v-model="pageData.formData.dictLabel" readonly />
        </nut-form-item>
        <nut-form-item label="总分值" prop="scoreTotal" v-if="pageData.formData.id">
          <nut-input v-model="pageData.formData.scoreTotal" readonly />
        </nut-form-item>
        <nut-form-item v-if="pageData.formData.signboard" label="门头" prop="signboard" label-width="70">
          <uploader v-model="pageData.formData.signboard" :del="false" :url="uploadUrl" return-type="object" type="1" :limit="1"></uploader>
        </nut-form-item>
        <nut-form-item v-if="pageData.formData.license" label="营业执照" prop="license" label-width="70">
          <uploader v-model="pageData.formData.license" :del="false" :url="uploadUrl" return-type="object" type="2" :limit="1"></uploader>
        </nut-form-item>
        <nut-form-item v-if="!pageData.formData.signboard" label="门头" prop="signboard" label-width="70">
          <uploader v-model="pageData.formData.signboard" :del="false" :url="uploadUrl" return-type="object" type="1" :limit="1"></uploader>
        </nut-form-item>
        <nut-form-item v-if="!pageData.formData.license" label="营业执照" prop="license" label-width="70">
          <uploader v-model="pageData.formData.license" :del="false" :url="uploadUrl" return-type="object" type="2" :limit="1"></uploader>
        </nut-form-item>
        <nut-form-item label="地址" prop="address" label-width="70">
          <nut-input v-model="pageData.formData.address" readonly />
        </nut-form-item>
        <nut-form-item label="负责人" prop="fzr" label-width="70">
          <nut-input v-model="pageData.formData.fzr" readonly />
        </nut-form-item>
        <nut-form-item label="联系方式" prop="phone" label-width="70">
          <nut-input v-model="pageData.formData.phone" readonly />
        </nut-form-item>
        <nut-form-item label="场所人数" prop="csnumber" label-width="70">
            <nut-input v-model="pageData.formData.csnumber" readonly />
        </nut-form-item>
        <view v-if="show3">
          <nut-form-item label="场所层数" prop="cengshu" label-width="70">
              <nut-input v-model="pageData.formData.cengshu" readonly />
          </nut-form-item>
          <nut-form-item label="场所面积" prop="mianji" label-width="70">
              <nut-input v-model="pageData.formData.mianji" readonly />
          </nut-form-item>
          <nut-form-item label="独立烟感数量" prop="yanganshu" label-width="90">
              <nut-input v-model="pageData.formData.yanganshu" readonly />
          </nut-form-item>
        </view>
        <nut-form-item label="营业状态" prop="status" label-width="70">
          <nut-input v-model="formatYyzt(pageData.formData.yyzt)[0].text" readonly />
        </nut-form-item>
      </nut-collapse-item>
      <nut-collapse-item title="检查内容" :name="2">
        <nut-form-item v-if="pageData.formData.id" label="是否隐藏合格项" prop="hiddenOk" label-width="140">
          <nut-switch v-model="hiddenOk" :active-value="1" :inactive-value="0" active-color="green"/>
        </nut-form-item>
        <nut-form-item label="检查类型" prop="checktypeid" label-width="70" :rules="[
                {
                  required: true,
                  message: '请选择检查类型'
                }
            ]">
          <select-popup v-model="pageData.formData.checktypeid" :echo="pageData.formData.typename" is-remote :remote-params="remoteParams.checkType"></select-popup>
        </nut-form-item>
        <nut-divider dashed />
        <nut-row v-for="(item, index) in pageData.formData.recorddtls" :key="index">
          <nut-col v-if="!pageData.formData.id || item.isOk !== 1 || !hiddenOk" :span="24" style="border-top: 2px solid #000;">
            <nut-form-item v-if="item.checkinfoid && pageData.checkInfoList.length" :label="'检查内容'+Number(index+1)" :prop="'recorddtls.' + index + '.checkinfoid'" label-width="90" :rules="[
                {
                  required: true,
                  message: '请选择检查内容'
                }
            ]">
              <select-popup v-model="item.checkinfoid" :columns="pageData.checkInfoList" :placeholder="item.checkinfo" :echo="item.checkinfo" :disabled="!pageData.formData.checktypeid"></select-popup>
            </nut-form-item>
            <nut-form-item :prop="'recorddtls.' + index + '.checkPhotos'" label-width="70">
              <template #label>
                <view>检查照片</view>
                <view v-if="item.egPic" class="eg" @click="handlePopupEg(item)"><nut-icon name="tips" custom-color="#fa2c19"></nut-icon></view>
              </template>
              <uploader v-model="item.checkPhotos" :url="uploadUrl" type="3" @uploadDel="uploadDel" :del="false"></uploader>
            </nut-form-item>
            <nut-form-item label="是否合格" prop="isOk">
              <template v-if="pageData.formData.id">
                <nut-tag v-if="item.isOk === 1" type="success">合格</nut-tag>
                <nut-tag v-else type="danger">不合格</nut-tag>
              </template>
              <nut-switch v-model="item.isOk" v-else :active-value="1" :inactive-value="0" active-color="green"/>
            </nut-form-item>
            <nut-form-item label="备注" prop="remark" v-if="item.remark">
              <view style="color: #000;">{{ item.remark }}</view>
            </nut-form-item>
            
            <nut-form-item v-if="item.isOk === 0" label="整改建议" :prop="'recorddtls.' + index + '.content'" label-width="70" :rules="[
                {
                  required: true,
                  message: '请输入整改建议'
                }
            ]">
              <view style="color: #000;">{{ item.content }}</view>
              <!-- <nut-input v-model="item.content" placeholder="请输入文本" /> -->
            </nut-form-item>
            <nut-form-item v-if="item.isOk === 0 && item.recordId" label="整改照片" :prop="'recorddtls.' + index + '.rectifyPhotos'" label-width="70">
              <uploader v-model="item.rectifyPhotos" :url="uploadUrl" type="4" @uploadDel="uploadDel" :del="false"></uploader>
            </nut-form-item>
            <nut-form-item v-if="item.isOk === 0 && item.recordId" label="是否合格" prop="status" label-width="70">
              <template v-if="pageData.formData.id">
                <nut-tag v-if="item.status === 1" type="success">合格</nut-tag>
                <nut-tag v-else type="danger">不合格</nut-tag>
              </template>
              <nut-switch v-model="item.status" v-else :active-value="1" :inactive-value="0" active-color="green"/>
            </nut-form-item>
            
          </nut-col>
          
          <nut-col v-if="!pageData.formData.id || item.isOk === 0 || !hiddenOk" :span="24">
            <!-- <view style="height: 1px;background: #eee;"></view> -->
            <nut-divider dashed />
          </nut-col>
        </nut-row>
      </nut-collapse-item>
      <nut-collapse-item v-if="getFormStatus === 1 && !userInfo.roleIds.includes(106)" title="合格签字" :name="3">
        <nut-form-item label="检查人员签字(合格)" prop="okSign1" label-width="70">
          <view v-if="pageData.formData.okSign1">
            <image :src="host + pageData.formData.okSign1" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'okSign1'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'okSign1')"></signature>
        </nut-form-item>
        <nut-form-item label="场所人员签字(合格)" prop="okSign2" label-width="70">
          <view v-if="pageData.formData.okSign2">
            <image :src="host + pageData.formData.okSign2" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'okSign2'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'okSign2')"></signature>
        </nut-form-item>
        <nut-form-item label="主管部门签字(合格)" prop="okSign3" label-width="70">
          <view v-if="pageData.formData.okSign3">
            <image :src="host + pageData.formData.okSign3" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'okSign3'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'okSign3')"></signature>
        </nut-form-item>
      </nut-collapse-item>
      <nut-collapse-item v-if="getFormStatus === 0 && !userInfo.roleIds.includes(106)" title="整改签字" :name="3">
        <nut-form-item label="检查人员签字(整改)" prop="todoSign1" label-width="70">
          <view v-if="pageData.formData.todoSign1">
            <image :src="host + pageData.formData.todoSign1" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'todoSign1'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'todoSign1')"></signature>
        </nut-form-item>
        <nut-form-item label="场所人员签字(整改)" prop="todoSign2" label-width="70">
          <view v-if="pageData.formData.todoSign2">
            <image :src="host + pageData.formData.todoSign2" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'todoSign2'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'todoSign2')"></signature>
        </nut-form-item>
        <nut-form-item label="主管部门签字(整改)" prop="todoSign3" label-width="70">
          <view v-if="pageData.formData.todoSign3">
            <image :src="host + pageData.formData.todoSign3" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'todoSign3'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'todoSign3')"></signature>
        </nut-form-item>
      </nut-collapse-item>
      <nut-collapse-item v-if="getFormStatus === 2 && !userInfo.roleIds.includes(106)" title="不合格签字" :name="3">
        <nut-form-item label="检查人员签字(不合格)" prop="nookSign1" label-width="70">
          <view v-if="pageData.formData.nookSign1">
            <image :src="host + pageData.formData.nookSign1" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'nookSign1'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'nookSign1')"></signature>
        </nut-form-item>
        <nut-form-item label="场所人员签字(不合格)" prop="nookSign2" label-width="70">
          <view v-if="pageData.formData.nookSign2">
            <image :src="host + pageData.formData.nookSign2" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'nookSign2'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'nookSign2')"></signature>
        </nut-form-item>
        <nut-form-item label="主管部门签字(不合格)" prop="nookSign3" label-width="70">
          <view v-if="pageData.formData.nookSign3">
            <image :src="host + pageData.formData.nookSign3" style="width: 260px;height: 150px;" />
          </view>
          <signature v-else :field="'nookSign3'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'nookSign3')"></signature>
        </nut-form-item>
      </nut-collapse-item>
    </nut-collapse>
  </nut-form>
  
  <nut-safe-area position="bottom" />
</template>

<style scoped lang="scss">
.row{width: 50%;}
.eg{padding: 10px 0 0;text-align: center}
.head-popup{padding: 20px 0 10px;text-align: center;font-size: 20px}
</style>
